<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!--<link rel="icon" href="../../favicon.ico">-->

    <title>首页-导航</title>

    <!-- Bootstrap core CSS -->
    <link href="../../css/bootstrap/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../../css/bootstrap/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../script/bootstrap/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../../script/jquery.min.js"></script>
    <script src="../../script/bootstrap/bootstrap.min.js"></script>
    <script src="../../script/bootstrap/docs.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../script/bootstrap/ie10-viewport-bug-workaround.js"></script>
    <!-- highcharts 图形插件 -->
    <script src="../../script/highcharts/highcharts.js"></script>
	<script src="../../script/highcharts/exporting.js"></script>
	<script src="../../script/highcharts/data.js"></script>
	<script src="../../script/highcharts/drilldown.js"></script>
	<script src="../../script/line_basic.js"></script>
	<script src="../../script/cpu_charts.js"></script>
	<script src="../../script/ram_charts.js"></script>
	<style type="text/css">
		.my_dropdown{
			border:#35a5e5 1px solid;
			box-shadow: 0 0 5px rgba(81, 203, 238, 1);
			-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
			-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
		}
		.my_menu{
			position: relative;
			left: 40px;
			display:none;
			border-top:1px solid #eee;
			border-bottom:1px dashed #eee;
			box-shadow: 4px 2px 5px rgba(0, 0, 0, 0.2);
			background-color: #FDFDFD;
		}
		.active{
			color: #fff;
			background-color: #428bca;
		}
		.nav-sidebar {
			margin-right: -21px;
			margin-bottom: 0px;
			margin-left: -20px;
		}
		.yingchang{
			display:none;
		}
		.f_left_default{
			left: -80px;
		}
		.f_left_over{
			left: -40px;
		}
		.f_left_click{
			left: 0px;
			border:#35a5e5 1px solid;
			box-shadow: 0 0 5px rgba(81, 203, 238, 1);
			-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
			-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
		}
		.fixed{
			position: fixed;
		}
	</style>
	<script >
	/*
	//使用说明：
	//1.控制（显示或隐藏）元素上添加：class="my_dropdown"
	//2.用一个元素将要进行显示或隐藏的元素括起来，并添加:class="my_menu"
	//3.要进行不同视图关联的元素添加： class="can_active" view-toggle="view_mappingID"
	//并在<!-- main end -->后面添加个模块属性：class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main yingchang" id="view_mappingID"
			//model_conctrol
			<ul class="nav nav-sidebar">
				<li>
					<a href="#" class="my_dropdown">
						Overview 
						<b class="glyphicon glyphicon-chevron-right"></b>
					</a>
					<ul class="my_menu nav nav-sidebar">
					<li class="can_active" view-toggle="Reports01"><a href="#">Reports01</a></li>
					<li class="can_active" view-toggle="Reports02"><a href="#">Reports02</a></li>
					<li class="can_active" view-toggle="Reports03"><a href="#">Reports03</a></li>
					</ul>
				</li>
			</ul>
			//mode_view
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main yingchang" id="Reports">
				<h1 class="page-header">this is Reports</h1>
			</div>
	*/
		$(function(){
			$(".my_dropdown").click(function(){
			//glyphicon glyphicon-chevron-right
			//glyphicon glyphicon-chevron-down
			//显示与隐藏
			if($(this).children("b").not(".glyphicon-chevron-down").attr("class")){
				$($(this).children("b")).not(".glyphicon-chevron-down").attr("class","glyphicon glyphicon-chevron-down");
			}else{
				$($(this).children("b")).not(".glyphicon-chevron-right").attr("class","glyphicon glyphicon-chevron-right");
			}
			$(this).next(".my_menu").toggle();
			//同时进行，蓝色效果（active）的设置	
			//$(".row .active").removeClass("active");
			//$(this).next(".my_menu").children("li").first().addClass("active");
			});
			
			//鼠标点击$（li.can_active）时，设置蓝色选中效果（active）
			$("li.can_active").click(function(){
				$(".row .active").removeClass("active");
				$(this).addClass("active");
				$(".main").not(".yingchang").addClass("yingchang");
				var view_id = "#"+$(this).attr("view-toggle");
				$(view_id).removeClass("yingchang");
			});
			
			//点击边框
			$(".sidebar_click").mouseenter(function(){
				if($(this).attr("class") === "sidebar_click f_left_default"){
					$(this).animate({left:'-50px'},1);
				}
			});
			$(".sidebar_click").mouseleave(function(){
				if($(this).attr("class") === "sidebar_click f_left_default"){
					//$(this).attr("style","");
					$(this).animate({left:'-80px'},1);
				}
			});			
			$(".sidebar_click").click(function(){
				if($(this).attr("class") === "sidebar_click f_left_click"){//展开->隐藏
					$(this).children("img").attr("src","../../images/p24_r.jpg");
					$(this).attr("style","");
					$(".sidebar").removeClass("sidebar_open");
					$(".main").removeClass("col-xs-6 col-xs-offset-6");
					$(this).attr("class","sidebar_click f_left_default");
				}else {//隐藏->展开
					$(this).children("img").attr("src","../../images/p24_l.jpg");
					$(this).attr("style","");
					$(".sidebar").addClass("sidebar_open");
					$(".main").addClass("col-xs-6 col-xs-offset-6"); 
					$(this).attr("class","sidebar_click f_left_click");
				}
			});
			
		});
	</script>
  </head>

    <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Help</a></li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
		<!-- sidebar -->
        <div class="col-sm-3 col-md-2 col-xs-6 sidebar">
			<ul class="nav nav-sidebar">
				<li name="" class="active can_active" view-toggle="Dashboard"><a href="#">Dashboard</a></li>
				<li >
					<a href="#" class="my_dropdown">
						Overview 
						<b class="glyphicon glyphicon-chevron-right"></b>
					</a>
					<ul class="my_menu nav nav-sidebar">
					<li class="can_active" view-toggle="CPU_RAM_PAGE"><a href="#">CPU_RAM_页面</a></li>
					<li >
						<a href="#" class="my_dropdown">
							Overview 
							<b class="glyphicon glyphicon-chevron-right"></b>
						</a>
						<ul class="my_menu nav nav-sidebar">
							<li class="can_active" view-toggle="Reports0"><a href="#">Reports0</a></li>
							<li class="can_active" view-toggle="Reports1"><a href="#">Reports1</a></li>
							<li class="can_active" view-toggle="Reports2"><a href="#">Reports2</a></li>
						</ul>
					</li>
					<li class="can_active" view-toggle="Reports"><a href="#">Reports</a></li>
					</ul>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<a href="#" class="my_dropdown">
						Overview 
						<b class="glyphicon glyphicon-chevron-right"></b>
					</a>
					<ul class="my_menu nav nav-sidebar">
					<li class="can_active" view-toggle="Reports01"><a href="#">Reports01</a></li>
					<li class="can_active" view-toggle="Reports02"><a href="#">Reports02</a></li>
					<li class="can_active" view-toggle="Reports03"><a href="#">Reports03</a></li>
					</ul>
				</li>
			</ul>
        </div>
		<!-- sidebar end -->
		<div class="sidebar_click f_left_default">
			<img height="20" alt="展开左侧菜单" src="../../images/p24_r.jpg" width="100px" border="0">
		</div>
		<!-- main -->
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="Dashboard">
          <h1 class="page-header">Dashboard</h1>
          <div class="row placeholders">
            <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
          </div>

          <h2 class="sub-header">Section title</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1,001</td>
                  <td>Lorem</td>
                  <td>ipsum</td>
                  <td>dolor</td>
                  <td>sit</td>
                </tr>
                <tr>
                  <td>1,002</td>
                  <td>amet</td>
                  <td>consectetur</td>
                  <td>adipiscing</td>
                  <td>elit</td>
                </tr>
                <tr>
                  <td>1,003</td>
                  <td>Integer</td>
                  <td>nec</td>
                  <td>odio</td>
                  <td>Praesent</td>
                </tr>
                <tr>
                  <td>1,003</td>
                  <td>libero</td>
                  <td>Sed</td>
                  <td>cursus</td>
                  <td>ante</td>
                </tr>
                <tr>
                  <td>1,004</td>
                  <td>dapibus</td>
                  <td>diam</td>
                  <td>Sed</td>
                  <td>nisi</td>
                </tr>
                <tr>
                  <td>1,005</td>
                  <td>Nulla</td>
                  <td>quis</td>
                  <td>sem</td>
                  <td>at</td>
                </tr>
                <tr>
                  <td>1,006</td>
                  <td>nibh</td>
                  <td>elementum</td>
                  <td>imperdiet</td>
                  <td>Duis</td>
                </tr>
                <tr>
                  <td>1,007</td>
                  <td>sagittis</td>
                  <td>ipsum</td>
                  <td>Praesent</td>
                  <td>mauris</td>
                </tr>
                <tr>
                  <td>1,008</td>
                  <td>Fusce</td>
                  <td>nec</td>
                  <td>tellus</td>
                  <td>sed</td>
                </tr>
                <tr>
                  <td>1,009</td>
                  <td>augue</td>
                  <td>semper</td>
                  <td>porta</td>
                  <td>Mauris</td>
                </tr>
                <tr>
                  <td>1,010</td>
                  <td>massa</td>
                  <td>Vestibulum</td>
                  <td>lacinia</td>
                  <td>arcu</td>
                </tr>
                <tr>
                  <td>1,011</td>
                  <td>eget</td>
                  <td>nulla</td>
                  <td>Class</td>
                  <td>aptent</td>
                </tr>
                <tr>
                  <td>1,012</td>
                  <td>taciti</td>
                  <td>sociosqu</td>
                  <td>ad</td>
                  <td>litora</td>
                </tr>
                <tr>
                  <td>1,013</td>
                  <td>torquent</td>
                  <td>per</td>
                  <td>conubia</td>
                  <td>nostra</td>
                </tr>
                <tr>
                  <td>1,014</td>
                  <td>per</td>
                  <td>inceptos</td>
                  <td>himenaeos</td>
                  <td>Curabitur</td>
                </tr>
                <tr>
                  <td>1,015</td>
                  <td>sodales</td>
                  <td>ligula</td>
                  <td>in</td>
                  <td>libero</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
		<!-- main end -->
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main yingchang" id="CPU_RAM_PAGE">
			<h1 class="page-header">内存占用率</h1>
			<div class="row placeholders">
			<div id="ram_chart1"></div>
			</div>
			
			<!-- 
			<div class="row placeholders">
            <div class="col-xs-6 col-sm-3 placeholder">
              <div id="ram_chart1"></div>
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <div id="ram_chart2"></div>
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <div id="ram_chart3"></div>
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <div id="ram_chart4"></div>
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
             -->
         
          <h1 class="page-header">CPU占用率</h1>
          <div class="row placeholders">
            <div class="col-xs-6 col-sm-3 placeholder">
              <div id = "cup_chart1"></div>
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <div id = "cup_chart2"></div>
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <div id = "cup_chart3"></div>
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <div id = "cup_chart4"></div>
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
          </div>
		</div>
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main yingchang" id="Reports1">
			<h1 class="page-header">this is Reports1</h1>
		</div>
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main yingchang" id="Reports2">
			<h1 class="page-header">this is Reports2</h1>
		</div>
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main yingchang" id="Reports0">
			<h1 class="page-header">this is Reports0</h1>
		</div>
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main yingchang" id="Reports01">
			<h1 class="page-header">this is Reports01</h1>
		</div>
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main yingchang" id="Reports02">
			<h1 class="page-header">this is Reports02</h1>
		</div>
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main yingchang" id="Reports03">
			<h1 class="page-header">this is Reports03</h1>
		</div>		
		
      </div>
    </div>

    <!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">Browser Version	Total Market Share
Microsoft Internet Explorer 8.0	26.61%
Microsoft Internet Explorer 9.0	16.96%
Chrome 18.0	8.01%
Chrome 19.0	7.73%
Firefox 12	6.72%
Microsoft Internet Explorer 6.0	6.40%
Firefox 11	4.72%
Microsoft Internet Explorer 7.0	3.55%
Safari 5.1	3.53%
Firefox 13	2.16%
Firefox 3.6	1.87%
Opera 11.x	1.30%
Chrome 17.0	1.13%
Firefox 10	0.90%
Safari 5.0	0.85%
Firefox 9.0	0.65%
Firefox 8.0	0.55%
Firefox 4.0	0.50%
Chrome 16.0	0.45%
Firefox 3.0	0.36%
Firefox 3.5	0.36%
Firefox 6.0	0.32%
Firefox 5.0	0.31%
Firefox 7.0	0.29%
Proprietary or Undetectable	0.29%
Chrome 18.0 - Maxthon Edition	0.26%
Chrome 14.0	0.25%
Chrome 20.0	0.24%
Chrome 15.0	0.18%
Chrome 12.0	0.16%
Opera 12.x	0.15%
Safari 4.0	0.14%
Chrome 13.0	0.13%
Safari 4.1	0.12%
Chrome 11.0	0.10%
Firefox 14	0.10%
Firefox 2.0	0.09%
Chrome 10.0	0.09%
Opera 10.x	0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition	0.09%</pre>
  </body>
</html>
